import React, { FC } from 'react'
import { Avatar, IconCheckbox } from '../../../components'
import { Wrap, IconRemove } from './style'
import { useVipStore } from '../store'
import shallow from 'zustand/shallow'
import { VipModel } from '@/api/manager/vip/interface'

export type ListType = VipModel & { number: string }

export const ListItem: FC<ListType> = ({ mcc, status: { checked }, number, mtKey }) => {
	const indexWidth = `${number ?? '00'}`.length * 8
	const { itemHandle, removeMt } = useVipStore(
		(state) => ({
			itemHandle: state.itemHandle,
			removeMt: state.removeMt,
		}),
		shallow
	)
	const handleCheckItem = (e: React.MouseEvent) => {
		if (e.ctrlKey) {
			itemHandle(mtKey, 'ctrl')
		} else if (e.shiftKey) {
			itemHandle(mtKey, 'shift')
		} else {
			itemHandle(mtKey, 'click')
		}
	}
	const handleMultiCheck = (e: React.MouseEvent) => {
		e.stopPropagation()
		itemHandle(mtKey, 'ctrl')
	}
	const handleRemove = (e: React.MouseEvent) => {
		e.stopPropagation()
		removeMt(mtKey)
	}
	return (
		<Wrap checked={checked} indexWidth={indexWidth} title={mcc.name} onClick={handleCheckItem}>
			<div className="checkbox-wrap" onClick={handleMultiCheck}>
				<IconCheckbox className="icon-checkbox" />
			</div>
			<div className="item-index">{number}</div>
			<div className="avatar">
				<Avatar value={mcc} />
			</div>
			<div className="name">
				<pre>{mcc.name}</pre>
			</div>
			<IconRemove className="remove" onClick={handleRemove} />
		</Wrap>
	)
}
